<!--  -->
<template>
  <div class="player-lyric">
    <b-scroll class="content" :probe-type="2" ref="scroll" @scroll="move" @scrollEnd="moveEnd">
      <div class="lyric">
        <div
          v-for="(item, index) in newLyric"
          class="lyric-list"
          ref="lyricList"
        >
          <span
            class="lyric-content"
            :style="{ color: index == currentIndex ? '#fff' : '' }"
          >
            {{ item.lyric }}
          </span>
        </div>
      </div>
    </b-scroll>
    <div class="time-line" v-show="isShow">
      <span class="left" @click="playbtn"><icon icon="#icon-bofang2" /></span>
      <span class="conter"></span>
      <span class="right">{{ newTime }}</span>
    </div>
  </div>
</template>

<script>
import BScroll from "@/components/common/scroll/BScroll";
import Icon from "@/components/content/icon/Icon";
export default {
  name: "Lyric",
  props: {
    lyric: {
      type: String,
      default() {
        return "";
      },
    },
  },
  data() {
    return {
      newLyric: [],
      time: [],
      newTime: '00:00',
      currentIndex: 0,
      currentTime: "00:00",
      lyricListHeight: 0,
      index: 1,
      moveIndex: 0,
      isShow: false
    };
  },
  components: {
    BScroll,
    Icon,
  },
  updated() {
    this.$refs.scroll.bs.refresh();
    this.lyricListHeight = this.$refs.lyricList[0].offsetHeight;
  },
  computed: {
    getCurrentTime() {
      this.currentTime = this.getTime(this.$store.state.currentTime * 1000);
    },
  },
  methods: {
    getLyric() {
      let regex1 = /(?<=\]).*/g;
      let regex2 = /(?<=\[).*?(?=\])/g;
      const lyric = this.lyric.match(regex1);
      this.time = this.lyric.match(regex2);
      lyric.forEach((item, index) => {
        this.$set(
          this.newLyric,
          index,
          (this.newLyric[index] = new setLyric(item))
        );
      });
      this.time.forEach((item, index) => {
        this.$set(
          this.newLyric,
          index,
          (this.newLyric[index] = new setLyric(
            this.newLyric[index].lyric,
            item
          ))
        );
      });
    },

    move(position) {
      this.isShow = true
      this.moveIndex = Math.round(-position.y / this.lyricListHeight)
      this.newTime = this.time[Math.round(this.moveIndex)].slice(0,5)
    },
    moveEnd() {
      setTimeout(() => {
        this.isShow = false
      }, 5000);
      
    },

    playbtn() {
      const btnTime = this.time[this.moveIndex];
      const playTime = parseInt(btnTime.slice(0,2)) * 60 + parseInt(btnTime.slice(3,5))
      this.$emit("lyricBtnTime", playTime)
    },

    getTime(date) {
      const d = new Date(date);
      const m = d.getMinutes();
      const s = d.getSeconds();
      return (
        ("00" + m).substr(m.toString().length) +
        ":" +
        ("00" + s).substr(s.toString().length)
      );
    },
  },
  watch: {
    lyric() {
      this.getLyric();
    },
    getCurrentTime() {},
    currentTime() {
      for (let item in this.time) {
        if (this.currentTime == this.time[item].slice(0, 5)) {
          this.index = item;
          this.currentIndex = item;
          this.newTime = this.time[item].slice(0,5)
        }
      }
      if(!this.isShow) {
        this.$refs.scroll.bs.scrollTo(0, -this.lyricListHeight * this.index, 300);
      }
      
    },
  }
};
class setLyric {
  constructor(data, item) {
    this.lyric = data;
    this.time = item;
  }
}
</script>
<style lang='scss' scoped>
.player-lyric {
  .content {
    position: fixed;
    top: 50px;
    bottom: 120px;
    left: 0;
    right: 0;
    text-align: center;
    overflow: hidden;
    .lyric {
      padding-top: 50%;
      padding-bottom: 60%;
      .lyric-list {
        position: relative;
        padding-top: 20px;
        .lyric-content {
          font-size: $font-size-medium;
          color: $color-text-l;
        }
      }
    }
  }
  .time-line {
    position: fixed;
    top: 232px;
    left: 0;
    right: 0;
    display: flex;
    width: 100%;
    justify-content: space-between;
    z-index: 99;
    .left {
      color: $color-text-ll;
    }
    .conter {
      position: relative;
      top: 8px;
      width: 80%;
      height: 1px;
      background: $color-dialog-background;
    }
    .right {
      position: relative;
      top: 3px;
      font-size: $font-size-small-s;
      color: $color-text-ll;
    }
  }
}
</style>